<template>
  <div id="app">
    <!-- 导航链接 -->
    <!-- <home/>
    <cart/>
    <mall/>
    <setting/> -->
      <router-view name="homeheader"></router-view>
      <router-view name="mallheader"></router-view>
      <!-- <router-view name="cartheader"></router-view> -->
      <!-- <router-view name="settingheader"></router-view> -->
    <router-view name="homenav" class="nav"></router-view>
    <div class="body">
      <!-- <router-link to="/home" tog="span">首页</router-link>
      <router-link to="/cart" tog="span">购物车</router-link>
      <router-link to="/mall" tog="span">商城</router-link>
      <router-link to="/setting" tog="span">设置</router-link> -->
     <router-view></router-view>
     <!-- <router-view name="homenav"></router-view> -->

     </div>
     <!-- 这个很重要不然的话组件的内容是没有办法渲染的 -->
     <!-- <tabbar></tabbar> -->
     <router-view name="tabbar"></router-view>
  </div>
</template>

<script>
import Home from 'pages/Home'
import Mall from 'pages/Mall'
import Cart from 'pages/Cart'
import Setting from 'pages/Setting'
// import routes from '@/router/routes'
import Tabbar from '@/components/tabbar'
export default {
  name: 'App',
  components: {Home, Mall, Cart, Setting, Tabbar}
}
</script>

<style lang='scss'>
/*! minireset.css v0.0.3 | MIT License | github.com/jgthms/minireset.css */
html,
body,
p,
ol,
ul,
li,
dl,
dt,
dd,
blockquote,
figure,
fieldset,
legend,
textarea,
pre,
iframe,
hr,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: normal;
}

ul {
  list-style: none;
}

button,
input,
select,
textarea {
  margin: 0;
}

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

img,
embed,
iframe,
object,
audio,
video {
  height: auto;
  max-width: 100%;
}

iframe {
  border: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
  text-align: left;
}
html,
body,
#app{
  width: 100%;
  height : 100%;
  display : flex;
  flex-direction: column;
  position: relative;
  // padding-bottom: 52px; ???将滚动条不到tabbar
}
// .header{
//   position: fixed;
// }
// .nav{
//   position: fixed;
// }
.body{
  flex: 1;
  overflow-x: hidden;
  // background: yellowgreen;
}
.tabbar{
  position: fixed;
  height: 52px;
  width: 100%;
  bottom: 0;
}
</style>
